$(function () {
  // 实现图片的裁切效果
  var $image = $('.cropper-box img')
  var options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }
  $image.cropper(options)

  // 点击按钮选择图片的控制
  $('#selectBtn').click(function () {
    // 这里需要做什么？触发file按钮的点击行为
    console.log('111')
    $('#avatar').click()
  })

  // 监听选择图片的事件
  $('#avatar').change(function (e) {
    // 获取选中的文件信息
    var file = e.target.files[0]
    // 基于选中的文件生成一个图片的预览地址
    var newImgURL = URL.createObjectURL(file)
    // 在重新生成裁切区域时，需要先销毁之前的裁剪区
    // 把新生成的图片更新到页面中的img标签中并且重新生成裁剪区
    $image
      .cropper('destroy')
      .attr('src', newImgURL)
      .cropper(options)
  })

  // 点击确定按钮获取裁剪区图片并且上传给服务器
  $('#confirmBtn').click(function () {
    // 生成base64裁切区域图片
    var avatar = $image.cropper('getCroppedCanvas', {
      width: 100,
      height: 100
    }).toDataURL('image/png')
    // 把生成的base64格式的图片传到服务器即可
    $.ajax({
      type: 'post',
      url: 'my/update/avatar',
      data: {
        avatar: avatar
      },
      success: function (res) {
        if (res.status === 0) {
          // 更新页面中显示的头像信息
          // 从子页面中访问父页面中的全局函数
          // parent.window.loadUserInfo()
          parent.$.loadUserInfo()
        }
      }
    })
  })
})